.flex-container {
    width: 100%;
    height: 100%;
    display: flex;
    background: @primaryHeaderBgcolor;
}

.left {
    position: relative;
    width: 19%;
    height: 100%;
    border-right: 1px solid @primaryBorderColor;
    transition: all .3s ease-in-out, background 0s, color 0s, border-color 0s;
    padding: 15px;
    box-sizing: border-box;

    .list {
        // height: 100%;
        height: calc(100% - 45px);
    }

    .zoom {
        position: absolute;
        right: -10px;
        top: 0;
        bottom: 0;
        // left: 0;
        margin: auto;
        width: 15px;
        height: 100px;
        background-color: rgb(175, 231, 182);
        cursor: pointer;
        z-index: 1;
    }
}

.left1 {
    width: 0.1%;
}

.right {
    width: 81%;
    height: 100%;
    transition: all .3s ease-in-out, background 0s, color 0s, border-color 0s;
    padding-left: 20px;
    box-sizing: border-box;

    ::v-deep .el-tabs {
        height: 100%;

        .el-tabs__content {
            height: calc(100% - 50px);

            .el-tab-pane {
                height: 100%;
            }
        }
    }

    .header {
        box-sizing: border-box;
        // padding: 0 12px;
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .header_left {
            // margin-left: 10px;
            display: flex;
            align-items: center;

            .org_name {
                font-size: 18px;
                color: @primaryThemeTxtColor;
            }

            .total {
                color: #aaa;
                margin-left: 8px;
                margin-top: 2px;
                display: flex;
                align-items: center;

                .yonghu {
                    font-size: 22px;
                    margin-right: 2px;
                }

            }
        }
    }

    .content {
        height: calc(100% - 65px);

        .table {
            width: 100%;
            height: calc(100% - 65px);
            min-height: calc(100% - 65px);
            border-bottom: 1px solid @primaryBorderColor;

            ::v-deep .cell {

                // 表格按钮
                .tableBtnIcon {
                    font-size: 18px;
                    cursor: pointer;
                    margin: 0 10px;
                }
            }

        }

        .pagination {
            ::v-deep .el-pager {
                border-radius: 30px;
                background: @paginationBgcolor;
                margin: 0 5px;
                height: 32px;
            }

            ::v-deep .el-pager li {
                min-width: 32px !important;
                background: @paginationBgcolor;
                color: #b4b7bd;
                height: 32px;
                line-height: 32px;
            }

            ::v-deep .el-pager li.active {
                color: #fff;
                border-radius: 30px;
                background: #7367f0;
            }

            ::v-deep .el-pager li:first-child {
                border-radius: 30px;
            }

            ::v-deep .el-pager li:last-child {
                border-radius: 30px;
            }
        }
    }
}

.right1 {
    width: 99.9%;
}

// 列表按钮
::v-deep .el_button {
    background: #7367f0;
    color: #fff;
    border: none;
}

// input后面的查询按钮

::v-deep .el-input-group__append {
    color: #fff;
    border: none;
    background-color: #7367f0;
}
@keyframes blink {

    0%,
    100% {
        box-shadow: 0 0 10px 5px red;
    }

    50% {
        box-shadow: 0 0 10px 5px transparent;
    }
}
@keyframes blink2 {

    0%,
    100% {
        box-shadow: 0 0 4px 3px #ccc;
    }

    50% {
        box-shadow: 0 0 4px 3px #ccc;
    }
}
@keyframes blink3 {

    0%,
    100% {
        box-shadow: 0 0 4px 2px #ccc,0 0 10px 5px red;
    }

    50% {
        box-shadow: 0 0 4px 2px #ccc,0 0 10px 5px transparent;
    }
}

.el_container {
    display: flex;
    height: 100%;
    width: 100%;
    box-sizing: border-box;

    .el_aside {
        width: 320px;
        width: 420px;
        margin-left: 20px;
        padding: 13px;
        box-sizing: border-box;
        // background-color: @primaryBgcolor7;
        border-left: 1px solid @primaryBorderColor;

        .dept-tree {
            margin-top: 10px;
            height: calc(100% - 50px - 40px);
            // height: 500px;
            overflow-y: auto;
            padding: 0 1px;

            .facility {
                display: flex;
                align-items: center;
                // height: 32px;
                padding: 8px 5px;
                color: @primaryThemeTxtColor;
                border-radius: 4px;
                position: relative;
                user-select: none;//防止选中文字进行拖拽

                >span:first-of-type {
                    width: 63%;
                    margin-left: 16px;
                }

                >span:last-of-type {
                    flex: 1;
                    text-align: right;
                }
            }

            >div {
                &:hover {
                    background: @primaryBorderColor7;
                }
            }

            .pop-upu {
                position: absolute;
                // left: 10px;
                bottom: 28px;
                left: -20%;
                transform: translate(-50%, 0);
                background: rgba(115, 103, 240, 0.9);
                width: 250px;
                padding: 8px 10px;
                border-radius: 5px;
                font-size: 14px;
                color: #fff;
                z-index: 9999;
                // user-select:none;
                opacity: 0;
                visibility: hidden;
                transition: all 0.2s ease-in;
                cursor: text;
                opacity: 1;
                visibility: visible;

                &:after {
                    content: "";
                    border: solid transparent;
                    border-width: 8px 8px 0 0;
                    /* 上边框和下边框透明，左边框宽度为箭头大小，右边框为0 */
                    border-left-color: rgba(115, 103, 240, 0.9);
                    /* 设置左边框的颜色 */
                    position: absolute;
                    top: 50%;
                    right: -8px;
                    /* 根据边框宽度调整，确保箭头在元素外部 */
                    transform: translateY(-50%);
                    /* 垂直居中 */
                    margin-left: 0;
                    /* 确保没有额外的水平偏移 */
                }
            }

            .el_img {
                width: 36px;
                height: 36px;
                border-radius: 50%;
                font-size: 22px;
                background-color: #7367F0;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
                cursor: pointer;
                overflow: hidden;
            }
        }
    }

    .contLeft {
        flex: 1;
        display: flex;
        flex-direction: column;
        padding-bottom: 20px;
        box-sizing: border-box;

        .handle {
            margin: 15px 0;
            display: flex;
            justify-content: space-between;

            >div {
                display: flex;
                align-items: center;
            }

            ::v-deep .miaozhundingwei {
                font-size: 14px !important;
            }
        }
    }

    .container {
        flex: 1;
        height: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid @primaryBorderColor;

        // background-color: @primaryBgcolor7;
        .caritem_div {
            width: 800px;
            height: 450px;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .div_box {
            width: 800px;
            height: 450px;
            position: absolute;
            top: 50%;
            left: 50%;
            // transform: translate(-50%, -50%);

            .elImage {
                cursor: move;
                width: 100%;
                height: 100%;
            }

            .device {
                position: absolute;
                width: 34px;
                height: 34px;
                border-radius: 50%;
                cursor: pointer;

                .pop-up {
                    position: absolute;
                    // left: 10px;
                    bottom: 50px;
                    left: 50%;
                    transform: translate(-50%, 0);
                    background: rgba(115, 103, 240, 0.9);
                    width: 250px;
                    padding: 8px 10px;
                    border-radius: 5px;
                    font-size: 14px;
                    color: #fff;
                    z-index: 9999;
                    // user-select:none;
                    opacity: 0;
                    visibility: hidden;
                    transition: all 0.2s ease-in;
                    cursor: text;

                    &:after {
                        content: "";
                        border: 8px solid transparent;
                        border-top-color: rgba(115, 103, 240, 0.9);
                        position: absolute;
                        bottom: -15px;
                        left: 50%;
                        transform: translate(-50%, 0);
                    }
                }

                &:hover .pop-up {
                    opacity: 1;
                    visibility: visible;
                }
            }

            .device2{
                animation: blink 1s linear infinite;
            }

            .device3{
                animation: blink2 1s linear infinite;
            }
            .device4{
                animation: blink3 1s linear infinite;
            }

            .icon {
                position: absolute;
                // color: #28c76f;
                border-radius: 50%;
                font-size: 20px;
                width: 34px;
                height: 34px;
                background-color: #7367F0;
                color: #fff;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .hon {
                color: #F84242;
            }

            .lixian {
                color: #90A4AE;
            }
        }
    }
}